<template>
    <el-container>
        <el-header>
            <h1>One.</h1>
            <div class="nav">
                <router-link class="router-link" :to="{ path: '/wallpaper' }">壁纸</router-link>
                <router-link class="router-link" :to="{ path: '/navigation' }">导航</router-link>
                <router-link class="router-link" :to="{ path: '/photography' }">摄影</router-link>
                <router-link class="router-link" :to="{ path: '/music' }">音乐</router-link>
            </div>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
        <el-footer>欢迎访问one-bin</el-footer>
    </el-container>
</template>

<script>
export default {
    data() {
        return {}
    },

    created() {},

    methods: {},
}
</script>

<style lang="less" scoped>
.el-container {
    .el-header {
        width: 100%;
        line-height: 60px;
        background: rgba(0, 0, 0, 0.05);

        display: flex;
        justify-content: space-between;

        h1 {
            line-height: 60px;
        }

        .nav > .router-link {
            margin: 0 3px;
            text-decoration: none;
            font-size: 14px;
            color: #606266;
        }
    }

    .el-main {
        padding: 0;
    }

    .el-footer {
        font-size: 12px;
        text-align: center;
        line-height: 60px;
    }
}
</style>
